<template>
  <div>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" style="width:60%;margin:0 auto 200px;">
      <el-form :rules="rules" ref="dataForm" :model="temp" label-position="right" label-width="100px" style='width: 300px; margin-left:30px;'>
        <el-form-item
          prop="roleName"
          label="角色名称:"
          :rules="filter_rules({required: true, max: 50, min: 3, type: 'nameBadCharactor'})"
        >
          <el-input v-model="temp.roleName" size="mini"></el-input>
        </el-form-item>
        <el-form-item
          label="角色描述:"
          prop="roleDescribe"
          :rules="filter_rules({required:true,maxLength:200})">
          <el-input type="textarea" v-model="temp.roleDescribe" size="mini"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="updateData" size="mini">确 定</el-button>
        <el-button v-else type="primary" @click="updateData" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
  import ElButton from '../../../node_modules/element-ui/packages/button/src/button.vue'
  import { addRole, updateRole } from '@/view/api/roleManager.js'
  import { yfuSuccessToast } from '@/utils/yfuMessage.js'

  export default {
    components: {ElButton},
    data () {
      return {
        temp: {
          id: undefined,
          roleName: '',
          roleDescribe: ''
        },
        textMap: {
          update: '修改角色',
          create: '新建角色'
        },
        dialogStatus: 'update',
        dialogFormVisible: false,
        dialogPvVisible: false,
        rules: {
          type: [{ required: true, message: 'type is required', trigger: 'change' }],
          timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
          title: [{ required: true, message: 'title is required', trigger: 'blur' }]
        },
        filterText: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    methods: {
      handleClick () {

      },
      createRoleDialog () {
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.resertDialog()
      },
      modifyRoleDialog (data) {
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.temp.id = data.id
        this.temp.roleName = data.roleName
        this.temp.roleDescribe = data.description
      },
      resertDialog () {
        this.temp.roleName = ''
        this.temp.roleDescribe = ''
      },
      updateData () {
        let cThis = this

        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            cThis.submitRoleInfo()
          } else {
            alert('错误提交！')
            return false
          }
        })
      },
      submitRoleInfo () {
        let cThis = this
        if (this.dialogStatus === 'create') {
          let params = {}
          params.roleName = this.temp.roleName
          params.description = this.temp.roleDescribe

          addRole(params,
            function (data) {
              console.log('新增角色成功！')
              cThis.dialogFormVisible = false
              cThis.$emit('listenToChildRefreshEvent')
              yfuSuccessToast('新增角色成功！')
            },
            function (error) {
              console.log(error)
            }
          )
        } else {
          let params = {}
          params.id = this.temp.id
          params.roleName = this.temp.roleName
          params.description = this.temp.roleDescribe

          updateRole(params,
            function (data) {
              console.log('修改角色成功！')
              cThis.dialogFormVisible = false
              cThis.$emit('listenToChildRefreshEvent')
              yfuSuccessToast('修改角色成功！')
            },
            function (error) {
              console.log(error)
            }
          )
        }
      },
      filterNode (value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      }
    },
    watch: {
      filterText (val) {
        this.$refs.tree2.filter(val)
      }
    }
  }
</script>

<style>

</style>
